<template>
  <div>
    <p>发起人</p>
    <div style="text-align: center">
      <el-select
        v-model="assignedUser"
        placeholder="请选择"
        multiple
        collapse-tags
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <p v-if="processType && processType === 'payrollCredit'">发起人是否可见明细金额</p>
    <div v-if="processType && processType === 'payrollCredit'">
      <el-radio-group v-model="isShow">
        <el-radio label="1">可见</el-radio>
        <el-radio label="0">不可见</el-radio>
      </el-radio-group>
    </div>
    <div>
      <el-button @click="cancelFn">取消</el-button>
      <el-button type="primary" @click="confirmFn">确定</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ApprovalNodeConfig",
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      options: [
        { label: "审批人1", value: "1" },
        { label: "审批人2", value: "2" },
        { label: "审批人3", value: "3" },
        { label: "审批人4", value: "4" },
        { label: "审批人5", value: "5" },
        { label: "审批人6", value: "6" },
      ],
      isShow: null,
      assignedUser: []
    };
  },
  computed: {
    ...mapState(['processType']),
    nodeProps() {
      return this.$store.state.selectedNode.props;
    },
    select() {
      return this.config.assignedUser || [];
    },
  },
  created() {
    this.isShow = this.nodeProps.isShow;
    this.assignedUser = [...this.nodeProps.assignedUser];
  },
  methods: {
    confirmFn() {
      this.$set(this.$store.state.selectedNode.props, 'isShow', this.isShow);
      this.$set(this.$store.state.selectedNode.props, 'assignedUser', this.assignedUser);
      this.$emit('cancel');
    },
    cancelFn() {
      this.$emit('cancel');
    }
  },
};
</script>

<style lang="less" scoped>
.user-type {
  /deep/ .el-radio {
    width: 110px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

/deep/ .line-mode {
  .el-radio {
    width: 150px;
    margin: 5px;
  }
}

/deep/ .el-form-item__label {
  line-height: 25px;
}

/deep/ .approve-mode {
  .el-radio {
    float: left;
    width: 100%;
    display: block;
    margin-top: 15px;
  }
}

/deep/ .approve-end {
  position: relative;

  .el-radio-group {
    width: 160px;
  }

  .el-radio {
    margin-bottom: 5px;
    width: 100%;
  }

  .approve-end-leave {
    position: absolute;
    bottom: -5px;
    left: 150px;
  }
}

/deep/ .el-divider--horizontal {
  margin: 10px 0;
}
</style>
